import React from 'react';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { Link, Tabs } from 'expo-router';
import { StyleSheet,View,Pressable,Image } from 'react-native';
import { useTranslation } from '@/app/utils/useTranslation';
import Colors from '@/constants/Colors';
import { useColorScheme } from '@/components/useColorScheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const { t } = useTranslation();

  return (
    <View style={{flex:1}}>
      <Tabs
        screenOptions={({ route }) => ({
          tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
          headerShown: false,
          tabBarIcon: ({ focused }) => {
            if (route.name === 'HomeScreen') {
                return (
                    <View style={styles.tabCenter}>
                        <Image
                            source={
                                focused
                                    ? require('@/assets/images/tabs/101.png')
                                    : require('@/assets/images/tabs/102.png')
                            }
                            style={[styles.IconImage]}
                        />
                    </View>
                );
            }else if (route.name === 'MarketScreen') {
                return (
                    <View style={styles.tabCenter}>
                        <Image
                            source={
                                focused
                                    ? require('@/assets/images/tabs/201.png')
                                    : require('@/assets/images/tabs/202.png')
                            }
                            style={[styles.IconImage]}
                        />
                    </View>
                );
            }else if (route.name === 'TradingScreen') {
                return (
                    <View style={styles.tabCenter}>
                        <Image
                            source={
                                focused
                                    ? require('@/assets/images/tabs/301.png')
                                    : require('@/assets/images/tabs/302.png')
                            }
                            style={[styles.IconImage]}
                        />
                    </View>
                );
            }else if (route.name === 'EcosystemScreen') {
                return (
                    <View style={styles.tabCenter}>
                        <Image
                            source={
                                focused
                                    ? require('@/assets/images/tabs/401.png')
                                    : require('@/assets/images/tabs/402.png')
                            }
                            style={[styles.IconImage]}
                        />
                    </View>
                );
            }else if (route.name === 'AssetsScreen') {
                return (
                    <View style={styles.tabCenter}>
                        <Image
                            source={
                                focused
                                    ? require('@/assets/images/tabs/501.png')
                                    : require('@/assets/images/tabs/502.png')
                            }
                            style={[styles.IconImage]}
                        />
                    </View>
                );
            }
            return null;
          },
        })}>
        <Tabs.Screen
          name="HomeScreen"
          options={{
            title:t('navigation.home'),
            headerRight: () => (
              <Link href="/modal" asChild>
                <Pressable>
                  {({ pressed }) => (
                    <FontAwesome
                      name="info-circle"
                      size={25}
                      color={Colors[colorScheme ?? 'light'].text}
                      style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
                    />
                  )}
                </Pressable>
              </Link>
            ),
          }}
        />
        <Tabs.Screen
          name="MarketScreen"
          options={{
            title:t('navigation.hangqing'),
          }}
        />
        <Tabs.Screen
          name="TradingScreen"
          options={{
            title:t('navigation.jiaoyi'),
          }}
        />
        <Tabs.Screen
          name="EcosystemScreen"
          options={{
            title:t('navigation.shengtai'),
          }}
        />
        <Tabs.Screen
          name="AssetsScreen"
          options={{
            title:t('navigation.asset'),
          }}
        />
      </Tabs>
    </View>
  );
}

const styles = StyleSheet.create({
    tabCenter: {
        width: 50,
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    IconImage: {
        width: 20,
        height: 20,
    },
});
